<template>
	<view class="image-message">
		<view class="image-desc">
			<text class="image-text">{{ msg.content.text || '没有说明' }}</text>
		</view>
		<uv-album :urls="imageStates"  keyName="src" multiple-size="80"></uv-album>

	</view>
</template>

<script>
import PreloadManager from '../../utils/PreloadManager.js';

export default {
	props: {
		msg: {
			type: Object,
			required: true
		},
		images: {
			type: Array,
			required: true,
			validator: (value) => {
				return value.length > 0 && value.every((item) => item.url);
			}
		}
	},
	data() {
		return {
			itemWidth: 280,
			gap: 15,
			listTotalWidth: 0,
			// 存储每个图片的加载状态和路径
			imageStates: [],
			unwatch:null
		};
	},
	onHide() {
	 console.log('----------');	
	},
	// watch: {
	// 	images: {
	// 		immediate: true,
	// 		handler() {
	// 			this.listTotalWidth = (this.itemWidth + this.gap) * this.images.length - this.gap;
	// 			// 初始化图片状态
	// 			this.imageStates = this.images.map(() => ({
	// 				loading: true,
	// 				src: ''
	// 			}));
	// 			// 预加载所有图片
	// 			this.preloadAllImages();
	// 		}
	// 	}
	// },
	mounted() {
		
		this.unwatch=this.$watch('images',( newVal,oldVal)=>{
			 if (oldVal?.length === 0 && newVal.length > 0) {
			        this.imageStates = newVal.map(() => ({ loading: true, src: '' }));
			        this.preloadAllImages();
			        return;
			      }
			
			
			this.listTotalWidth = (this.itemWidth + this.gap) * this.images.length - this.gap;
			// 初始化图片状态
			this.imageStates = this.images.map(() => ({
				loading: true,
				src: ''
			}));
			// 预加载所有图片
			this.preloadAllImages();
			
			
		},{immediate: true,deep:true})
		
	},
	unmounted(){
			console.log('取消了监听');
		if(this.unwatch){
			console.log('取消了监听');
			this.unwatch()
			this.unwatch=null
		}
	},
	methods: {
		/**
		 * 批量预加载所有图片
		 */
		preloadAllImages() {
			this.images.forEach((img, index) => {
				this.loadImage(img.url, index);
			});
		},

		/**
		 * 加载单个图片，带重试机制
		 */
		async loadImage(url, index, retryCount = 2) {
			try {
				// 标记为加载中
				this.$set(this.imageStates, index, {
					loading: true,
					src: ''
				});

				// 预加载图片，返回本地路径
				const localPath = await PreloadManager.preloadFile(url, 'image');
		

				// 更新图片路径
				this.$set(this.imageStates, index, {
					loading: false,
					src: localPath
				});
			} catch (e) {
				console.error(`图片加载失败 (${url})：`, e);

				// 如果还有重试次数，进行重试
				if (retryCount > 0) {
					console.log(`将重试加载图片 (剩余次数: ${retryCount})`);
					setTimeout(() => {
						this.loadImage(url, index, retryCount - 1);
					}, 1000);
					return;
				}

				// 所有重试都失败，显示默认图片
				this.$set(this.imageStates, index, {
					loading: false,
					src: '../../static/nopic.png'
				});
			}
		},

		/**
		 * 预览图片，使用本地路径
		 */
		previewImage(index) {
			// 收集所有图片的本地路径
			const urls = this.imageStates.map((state) => {
				// 如果本地路径加载失败，使用原始URL
				return state.src !== '../../static/nopic.png' ? state.src : this.images[index].url;
			});

			uni.previewImage({
				current: urls[index],
				urls: urls
			});
		}
	}
};
</script>

<style scoped>
.image-message {
	padding: 10rpx 0;
}

.image-scroll-container {
	overflow: hidden;
}

.image-scroll {
	white-space: nowrap;
}

.image-list {
	display: flex;
	flex-direction: row;
	gap: 12rpx;
}

.image-item {
	display: flex;
	flex-direction: row;
	width: 280rpx;
	margin-right: 15rpx;
}

.message-image {
	width: 280rpx;
	height: 200rpx;
	border-radius: 10rpx;
}

/* 加载状态样式 */
.image-loading {
	width: 280rpx;
	height: 200rpx;
	border-radius: 10rpx;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-desc {
	display: flex;
	flex-direction: row;
	margin: 10rpx 20rpx;
}

.image-text {
	width: 500rpx;
	font-size: 32rpx;
}
</style>
